<template>
	<view @tap="show=!show" class="iconfont menu" :class="show?'icon-guanbi1':'icon-caidan'"></view>

	<view class="menu-content" :class="{'show':show}">
		<!-- 用户信息 -->
		<view class="m-40 relative">
			<view @tap="userSelect=!userSelect" class=" flex-between bg-white radius-20 p-20">
				<view class="flex-centent">
					<image class="w-60 h-60" src="/static/img/default_avatar.png" mode="aspectFill"></image>
					<text class="ml-20 font-bold color-6">{{userInfo.username}}</text>
				</view>
				<view class="iconfont icon-paixu2"/>
			</view>
			
			<!-- 下拉菜单 -->
			<view :class="userSelectClass" class="absolute top-110 w-670 z-index-1 bg-white radius-10 font-26 color-6 select-layer animate__animated animate__faster">
				<view v-for="(item,index) in select" :key="index" class="plr-40 h-80 flex" :class="{'border-top':item.border}">{{item.label}}</view>
			</view>
		</view>
		
		
		<!-- 滑动区域 -->
		<scroll-view scroll-y="true" class="scroll-view" >
			
			<!-- 菜单 -->
			<view class=" mlr-100">
				<block v-for="(item,index) in menus">
					<view :class="{'bg-white':menuCur==index}" class="flex p-20 radius-10 mb-10">
						<text class="iconfont color-a" :class="item.class"></text>
						<text class="ml-20 color-6 font-24">{{item.label}}</text>
					</view>
				</block>
			</view>
			
			<!-- 任务列表 -->
			<view>
				<view @tap="$go(`/pages/project-info/project-info?id=${item._id}`)" v-for="(item,index) in myProject" :key="index" class="flex m-40 color-6">
					<text class="iconfont icon-xiangmu mr-12"></text>
					<text class="font-26">{{item.name}}</text>
				</view>
				<view v-if="myProject.length==0" class="flex-centent font-26 color-6 h-60">【你还没有加入项目】</view>
			</view>
		</scroll-view>
		
		
		<!-- 底部 -->
		<view class="foot mt-20">
			<view class="flex-between bg-white mlr-100 p-16 radius-10">
				<text class="iconfont icon-sousuo mr-12 color-6"></text>
				<input class="flex-1 font-26" type="text" placeholder="搜索项目名称..." placeholder-class="color-9" />
			</view>
			
			<view @tap="newProject" class="flex-centent mlr-100 bg-green color-f font-26 h-70 mt-24 radius-10">
				<text class="mr-10 font-30">+</text>
				<text>新建项目</text>
			</view>
		</view>
		
	</view>
	
	<!-- 新建项目 -->
	<bottom-layer ref='layer' @confirm="confirmProject">
		<view class="plr-40 ptb-20">
			<view class="flex-between mb-30">
				<text class="color-3 font-26 w-160 font-right">
					<text class="color-red">*</text>
					<text>项目名称：</text>
				</text>
				<view class="border flex-1 radius-6">
					<input v-model="projectParams.name" class="ptb-14 plr-20 font-26" type="text" placeholder="请输入项目名称" placeholder-class="color-9" />
				</view>
			</view>
			<view class="flex-between">
				<text class="color-3 font-26 w-160 font-right">项目模板：</text>
				<view class="border flex-1 radius-6">
					<picker mode="selector" :range="projectSelect" range-key="name" @change="projectCurChange">
						<view class="ptb-14 plr-20 font-26 flex-between">
							<text v-if="projectSelect.length===0" class="color-9">【数据获取中...】</text>
							<block v-else>
								<text>{{projectSelect[projectCur].name}}</text>
								<text class="iconfont icon-xiala font-26 color-9"></text>
							</block>
						</view>
					</picker>
				</view>
			</view>
		</view>
	</bottom-layer>
	
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name: "menu-content",
		data() {
			return {
				// 打开弹窗
				show: true,
				
				// 我参与的项目列表
				myProject:[],
				
				// 打开个人中心下拉
				userSelect:false,
				userSelectClass:'',
				
				// 项目模板
				projectCur:0,
				projectSelect:[],
				projectParams:{
					name:'',
					code:''
				},
				
				select:[
					{ label:'个人设置',border:false },
					{ label:'密码设置',border:false },
					{ label:'清除缓存',border:false },
					{ label:'系统设置',border:true },
					{ label:'任务等级',border:false },
					{ label:'团队管理',border:true },
					{ label:'所有项目',border:false },
					{ label:'已归档项目',border:false },
					{ label:'简体中文',border:true },
					{ label:'退出登录',border:true },
				],
				
				menuCur:0,
				menus:[
					{ label:'仪表盘', class:'icon-yibiaopan' },
					{ label:'日历', class:'icon-rili' },
					{ label:'消息', class:'icon-xiaoxi' },
					{ label:'文件', class:'icon-wenjianjia' },
				],
			};
		},
		computed:mapState('user',['userInfo','isLogin']),
		watch:{
			userSelect(val){
				if(val) this.userSelectClass = 'show animate__fadeIn'
				else{
					this.userSelectClass = 'show animate__fadeOut'
					setTimeout(()=>{
						this.userSelectClass = ''
					},500)
				}
			}
		},
		created() {
			this.getUserProject()
			this.getProjectTemplate()
		},
		methods:{
			// 获取我参与的项目列表
			async getUserProject(){
				const db = uniCloud.database();
				let {result} = await db.collection('project-list').where({uid:db.env.uid}).get()
				if(result.code==0) this.myProject = result.data
			},
			
			// 获取项目模板数据
			async getProjectTemplate(){
				const db = uniCloud.database();
				let {result} =await  db.collection('project-template').get()
				if(result.code==0) this.projectSelect = result.data
			},
			
			// 打开新建项目弹窗
			newProject(){
				this.$refs.layer.open()
			},
			
			// 确认新建
			confirmProject(){
				this.projectParams.code = this.projectSelect[this.projectCur].code
				if(!this.projectParams.name) return this.$toast('请输入项目名称')
				const db = uniCloud.database();
				let params = {
					...this.projectParams,
					uid:db.env.uid
				}
				db.collection('project-list').add(params)
				.then(res=>{
					if(res.result.code!=0) return this.$toast(res.result.errMsg)
					this.$refs.layer.close()
					this.$toast('新建项目成功')
					this.getUserProject()
					this.projectParams={
						name:'',
						code:''
					}
				}).catch(err=>{
					this.$toast(err.result.errMsg)
				})
			},
			
			// 切换当前选择的模板
			projectCurChange(e){
				this.projectCur = e.detail.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.select-layer{
		box-shadow: 0 10rpx 50rpx rgba(0,0,0,0.1);
		display: none;
		&.show{
			display: block;
		}
	}
	.border-top{
		border-top: 1px solid #e8eaec;
	}
	
	.scroll-view{
		height: calc(100vh - 400rpx);
	}
	
	
	.color-6{
		color: #6C7D8C;
	}
	
	.menu-content {
		background: #F4F5F7;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		transform: translateX(100vw);
		transition: all 0.3s;
		z-index: 1;
		&.show{
			transform: translateX(0);
		}
	}

	.menu {
		position: fixed;
		right: 0;
		top: 150rpx;
		z-index: 2;
		width: 82rpx;
		height: 74rpx;
		background: #fff;
		box-shadow: 0 0 100rpx rgba(0, 0, 0, 0.2);
		font-size: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx 0 0 10rpx;
		font-weight: bold;
		color: #333;
		cursor: pointer;
	}
</style>
